<template>
  <div class="count-effect">
    <div class="card">
      <div class="card__header">
        <span class="label">总工单数量</span>
        <span class="value">{{ topInfo.workorderNum }}</span>
      </div>

      <div class="card__container">
        <el-progress v-if="per !== null" :percentage="per" :stroke-width="8" />
      </div>

      <div class="card__footer">
        <ul class="count-effect__cop">
          <li>
            <span>已处理</span>

            <div class="fall">
              <!-- <i class="el-icon-bottom-right"></i> -->
              <span>{{ topInfo.handled }}</span>
            </div>
          </li>

          <li>
            <span>处理中</span>

            <div class="rise">
              <!-- <i class="el-icon-top-right"></i> -->
              <span>{{ topInfo.unhandled }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    topInfo: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      per: null
    }
  },
  mounted() {
    console.log('this.topInfo', this.topInfo)
    // if(this.topInfo == undefined){
    // 	return
    // }
    // this.getInfo()
    this.per = parseInt((this.topInfo.handled / this.topInfo.workorderNum) * 100)
    if (isNaN(this.per)) {
      this.per = 0
    }
  },
  methods: {
    getInfo() {
      // this.$service.home.getInfo().then((res) => {
      //   this.topInfo = res.topInfo.info4

      //   this.per = parseInt((this.topInfo.handled / this.topInfo.workorderNum) * 100)
      //   if (isNaN(this.per)) {
      //     this.per = 0
      //   }
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.count-effect {
	&__cop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;

		li {
			display: flex;
			list-style: none;
			flex: 1;
			color: #d8d8d8;

			.fall,
			.rise {
				display: flex;
				align-items: center;
				margin-left: 10px;
			}

			.fall {
				color: #13ae7c;
			}

			.rise {
				color: #f21e37;
			}
		}
	}

	.card__container {
		padding-top: 15px;
		padding-right: 10px;
		box-sizing: border-box;
	}
}
</style>
